<template>
	<view>
		<view class="wrap">
			<view class="voucher" v-for="voucher in vouchers">
				<view class="pay-time info">
					<view class="T">核销时间</view>
					<view class="V">{{$u.timeFormat(voucher.payment_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="info">
					<view class="T">卡券名称</view>
					<view class="V">{{voucher.voucher_name}}</view>
				</view>
				<view class="info">
					<view class="T">卡券密钥</view>
					<view class="V">{{voucher.voucher_code}}</view>
				</view>
				<view class="info">
					<view class="T">卡券面额</view>
					<view class="V">{{voucher.face_value}} (结算：{{voucher.settlement_amount}})</view>
				</view>
			</view>


			<u-loadmore bg-color="#fff" class="u-padding-30" :status="loadStatus" @loadmore="loadMore"
				:load-text="loadText" v-if="logs.length>0"></u-loadmore>
			<u-back-top :scroll-top="scrollTop"></u-back-top>

		</view>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				logs: [{
					id: 1,
					created: '08-29 12:00',
					desc: '分红收入',
					change: 13.00
				}],
				user: {},
				paging: {
					state: 'paid',
					current_page: 1,
					total_pages: 1,
					page_zie: 100
				},
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				shop: {},
				vouchers: [],
				options:{}
			}
		},
		onLoad(options) {
			this.options = options
			this.getShop()
		},
		onShow() {
			this.getUserInfo();
			this.getVouchers();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.paging.current_page >= this.paging.total_pages) {
				this.loadStatus = 'nomore';
				return;
			}
			this.loadStatus = 'loading';
			this.paging.current_page = ++this.paging.current_page;
			this.getVouchers()
		},
		methods: {
			openPage() {

			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.quantity;
				});
				return num;
			},
			stateDesc(voucher) {
				if (voucher.state === 'active') {
					return '待使用'
				}
				if (voucher.state === 'paid') {
					return '已使用';
				}
				if (voucher.state === 'expired') {
					return '已过期';
				}
				if (voucher.state === 'void') {
					return '已失效';
				}
				return voucher.state
			},
			getVouchers() {
				this.$u.post('/store-manage/store-voucher', this.paging).then(res => {
					if (res.page.current_page === 1) {
						this.vouchers = res.list;
					} else {
						this.vouchers = this.vouchers.concat(res.list);
					}
					this.paging.current_page = res.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
				}).catch(e => {})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			loadMore() {
				console.log('load more')
				if (this.paging.current_page < this.paging.total_pages) {
					this.paging.current_page = this.paging.current_page + 1;
					this.getVouchers();
				}
			}
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.wrap{
		margin: 20rpx;
		.voucher{
			padding: 20rpx;
			background-color: #f6f6f6;
			margin-bottom: 20rpx;
			border-radius: 4px;
			line-height: 1.8;
			.info{
				display:flex;
				.T{
					width: 140rpx;
					color: rgba(0,0,0,.53);
				}
				.V{
					flex: 1;
					white-space: break-spaces;
					word-break: break-all;
				}
			}
		}
		
	}
</style>
